<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .list{
            width: 200px;
            height: 150px;
            background-color: skyblue;
            overflow: auto;
        }
        .news{
            height: 30px;
        }
    </style>
</head>
<body>
    <!-- <div class="list">
        <div class="news">新闻7</div>
        <div class="news">新闻6</div>
        <div class="news">新闻5</div>
        <div class="news">新闻4</div>
        <div class="news">新闻3</div>
        <div class="news">新闻2</div>
        <div class="news">新闻1</div>
    </div> -->

    <div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/17.0.1/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/17.0.1/babel.min.js"></script>
	<!-- 引入prop-types，用于对组件标签属性进行限制 -->
	<script type="text/javascript" src="../js/17.0.1/prop-types.js"></script>

	<script type="text/babel">
        class NewsList extends React.Component{
            state = { newsArr:[] };

            componentDidMount(){
                setInterval(()=>{
                    const { newsArr } = this.state;
                    const news = `新闻${newsArr.length+1}`;
                    newsArr.unshift(news)
                    this.setState({ newsArr:newsArr });
                },1000)
            }

            getSnapshotUpdate(){
                return this.refs.list.scrollHeight
            }

            componentDidUpdate(preProps,preState,height){
                const list = this.refs.list;
                list.scrollTop += list.scrollHeight - height;
            }

            render(){
                const { newsArr } = this.state;
                return (
                    <div className="list" ref="list">
                        {
                            newsArr.map((e,index)=>{
                                return <div className="news" key={ index }>{e}</div>
                            })
                        }
                    </div>
                )
            }
        }
        ReactDOM.render(<NewsList />,document.getElementById('test'))
    </script>
</body>
</html>